<template>
  <div class="wrapper">
    <!-- 侦听单个变量 -->
    <!-- case1：<input v-model="userName" type="text"> -->

    <!-- 侦听多个变量 -->
    <!-- case1：<input v-model="userName" type="text">
    case2：<input v-model="age" type="text"> -->

    <!-- 深度侦听 -->
    case1：<input v-model="obj.foo.bar.name" type="text">
  </div>
</template>

<script setup lang="ts">
import { reactive,  ref, watch, computed } from 'vue';

/**
 * 侦听单个变量
 */
// const userName = ref<string>('张三');
// watch(msg, (newVal, oldVal) => {
//   console.log(newVal, oldVal);
// })

/**
 * 侦听多个变量
 */
// const userName = ref<string>('张三');
// const age = ref<number>(18);
// watch([userName, age], (newVal, oldVal) => {
//   console.log(newVal, oldVal);
// })

/**
 * 深度侦听
 * 如果用ref实现深层次对象的响应式，侦听的时候需要开启深度侦听
 * 因此深层次对象建议用reactive实现响应式
 */

// const obj = reactive({
//   foo: {
//     bar: {
//       name: '张三'
//     }
//   }
// })

// let obj1 = reactive({})

// obj1 = computed(() => {
//     return JSON.parse(JSON.stringify(obj))
// })

// watch(obj1, (newVal, oldVal) => {
//   console.log(newVal, oldVal);
// })

/**
 * 监听深层次对象中的某个属性
 * 数据源需要采用函数形式
 */
// const obj = reactive({
//   foo: {
//     bar: {
//       name: '张三'
//     }
//   }
// })
// watch(() => obj.foo.bar.name, (newVal, oldVal) => {
//   console.log(newVal, oldVal);
// })


/**
 * watch第三个参数
 */
const obj = ref({
  foo: {
    bar: {
      name: '张三'
    }
  }
})
watch(obj, (newVal, oldVal) => {
  console.log(newVal, oldVal);
}, {
  deep: true, // 深度侦听
  immediate: true, // 立即执行
  flush: 'post' // pre：组件更新之前执行；sync：同步执行；post：组件更新之后执行
})

</script>

<style scoped>

</style>